<template>
  <div class="system-management-container app-container">
    <div class="search-box">
      <TabSearch
        label-width="90px"
        :data="searchData"
        otherType="parent_id"
        @searchForm="searchForm"
        @resetForm="resetForm"
      />
    </div>
    <div class="list-wrapper" style="flex: 1;">
      <div class="content">
        <div class="title">
          <span>菜单管理</span>
        </div>
        <div class="operation">
          <el-button type="primary" @click="handleAdd(true)">新增</el-button>
          <!-- <el-button @click="handleEdit">修改</el-button> -->
          <el-button>展开</el-button>
        </div>
        <comm-table
          ref="dragTable"
          :loading="loading"
          :data="tableDataList.length ? tableDataList : tableData"
          :rowKeys="rowKey"
          :expandAll="expanded"
          style="width: 100%"
        >
          <el-table-column width="80" type="selection" />
          <el-table-column prop="menu_name" label="菜单名称" width="200" show-overflow-tooltip />
          <el-table-column prop="order_num" label="排序" width="150" />
          <el-table-column prop="url" label="请求地址" width="200" show-overflow-tooltip />
          <el-table-column prop="menu_type" label="类型" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.menu_type === 'D'">模块</span>
              <span v-else-if="scope.row.menu_type === 'M'">目录</span>
              <span v-else-if="scope.row.menu_type === 'C'">菜单</span>
              <span v-else-if="scope.row.menu_type === 'F'">按钮</span>
              <!-- 菜单  -->
            </template>
          </el-table-column>
          <el-table-column prop="visible" label="可见" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.visible === '0'">显示</span>
              <span v-else-if="scope.row.visible === '1'">隐藏</span>
            </template>
          </el-table-column>
          <el-table-column prop="perms" label="权限标识" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <span class="operation-btn" @click="handleEdit(scope)">编辑</span>
              <span class="operation-btn" @click="handleAdd({pid: scope.row.pk_id})">新增</span>
              <span class="operation-btn" @click="openDelectBox({ pid: scope.row.pk_id })">删除</span>
            </template>
          </el-table-column>
        </comm-table>
      </div>
    </div>
    <div v-if="dialogVisible">
      <el-dialog
        :title="title + '菜单'"
        :visible.sync="dialogVisible"
        width="50%"
        class="handle-dialog"
        :destroy-on-close="true"
        @close="dialogVisible = false"
      >
        <add-menu ref="addDialog" :titles="title" />
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确定</el-button>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import TabSearch from "@/components/TabSearch";
import AddMenu from "../modules/addMenu";
import TableCommMixin from "@/mixins/TableCommMixin";
import SystemMixin from "@/mixins/SystemMixin";
import {
  getMenuDetail,
  getMenuForParent // 获取父元素详情
} from "@/api/api";
export default {
  name: "MenuManagement",
  components: {
    TabSearch,
    AddMenu
  },
  mixins: [TableCommMixin, SystemMixin],
  data() {
    return {
      title: "",
      rowKey: "pk_id",
      expanded: false,
      tableDataList: [],
      dialogVisible: false,
      url: {
        list: "/system/api/Menu",
        method: "get",
        // 新增 {roleIds}/{postIds}
        add: "/system/api/Menu",
        addMethod: "post",
        // 编辑
        edit: "/system/api/Menu",
        editMethod: "put",
        // 删除
        delete: "/system/api/Menu",
        deleteMethod: "delete"
      },
      searchData: [
        {
          key: "menu_name",
          title: "菜单名称 ",
          type: "input",
          attr: {
            placeholder: "请输入"
          }
        },
        // {
        //   key: 'date',
        //   title: '创建时间',
        //   type: 'time',
        //   attr: {
        //     placeholder: '请选择'
        //   }
        // },
        {
          key: "visible",
          title: "菜单状态",
          type: "select",
          attr: {
            placeholder: "所有"
          },
          options: [
            {
              value: "",
              label: "所有"
            },
            {
              value: 0,
              label: "显示"
            },
            {
              value: 1,
              label: "隐藏"
            }
          ]
        }
      ],
      searchValueShow: false
    };
  },
  created() {
    // console.log(this.tableData, 'this.tableData')
  },
  watch: {
    // tree数据处理
    tableData: {
      handler(val) {
        this.tableDataList = [];
        if (val.length && !this.searchValueShow) {
          this.tableDataList = this.assembleTreeData(val, "pk_id", "parent_id");
        }
      },
      immediate: true
    }
  },
  methods: {
    beforeAdd(data) {
      return new Promise((resolve, reject) => {
        console.log(data);
        if (typeof data === "boolean") {
          this.$refs["addDialog"]["form"]["parent_name"] = "主目录";
          this.$refs["addDialog"]["form"]["parent_id"] = "0";
        } else {
          getMenuForParent(data).then(res => {
            if (res.code === 0) {
              this.$refs["addDialog"]["form"]["parent_name"] =
                res["data"]["parent_name"];
              this.$refs["addDialog"]["form"]["parent_id"] =
                res["data"]["parent_id"];
            }
          });
        }
        resolve();
      });
    },
    beforeSearchForm() {
      this.searchValueShow = true;
    },
    beforeResetForm() {
      this.searchValueShow = false;
    },
    // 删除
    openDelectBox(param) {
      this.$confirm("此操作将此用户删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (typeof param === "string") {
            this.handleDelete(param);
          } else {
            this.handleDeleteOne(param);
          }
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除"
          });
        });
    },
    // 编辑之前
    async beforeEdit(data) {
      let parentNmae = "";
      await getMenuForParent({ pid: data.row.pk_id }).then(res => {
        if (res.code === 0) {
          parentNmae = res["data"]["parent_name"];
        }
      });
      return new Promise((resolve, reject) => {
        getMenuDetail({ pid: data.row.pk_id }).then(res => {
          if (res.code === 0) {
            // 唯一性检测
            if (!res.data["checkParam"]) {
              res["data"]["checkParam"] = {
                uniqueMenuName: false
              };
            }
            res["data"]["parent_name"] = parentNmae;
            resolve(res.data);
          } else {
            this.$message({ type: "error", message: res.msg });
            reject({});
          }
        });
      });
    },
    // 提交之前
    async beforeSubmit(data) {
      return new Promise(resolve => {
        let adoptValue = false;
        // 唯一性检测
        if (data["checkParam"]) {
          if (Object.values(data["checkParam"]).length) {
            Object.values(data["checkParam"]).some(item => {
              if (item) {
                adoptValue = true;
              }
            });
          }
        }
        if (adoptValue) {
          resolve({ status: -1 });
        } else {
          resolve(data);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.system-management-container {
  margin: 0 22px;
  .search-box {
    margin-top: 20px;
    background: rgba(245, 247, 249, 1);
    border: 1px solid rgba(221, 221, 221, 1);
    padding-top: 13px;
  }
}
</style>
